<template>

	<view>
		<bg-video></bg-video>
		<cu-custom bgColor="bg-pink" :isBack="true">
			<block class="text-white" slot="content">报名详细</block>
		</cu-custom>
		<view class="bg-white">
			<view class="padding solid-bottom flex  justify-start align-baseline">
				<view class="text-pink title">
					<text class="text-xxl  ">
						<text class="iconfont icon-baomingrenshu-"></text>
					</text>
					<text>报名信息</text>
				</view>
			</view>
			<view class=" bg-white flex padding-sm">
				<view class="flex flex-direction align-center w-25">
					<view class="cu-avatar round xl" :style="{backgroundImage: `url(${client.headimg})`}"></view>
					<view>{{client.nc}}</view>
				</view>
				<view class="w-75 flex flex-direction justify-start">
					<text class="padding-xs">{{aclientbm.bmid}}</text>
					<view class="flex justify-between align-baseline">
						<text class="padding-xs">
							{{aclientbm.ct}}
						</text>
						<text class="text-red padding-xs">￥{{(aclientbm.price) / 100}}</text>
					</view>
					<view class="padding-xs flex justify-end">
						<text>
							<text class="text-red" v-if="aclientbm.stu == 'P'">排队中（{{aclientbm.sort}}）</text>
							<text class="text-green" v-if="aclientbm.stu == 'B'">已报名</text>
							<text class="text-green" v-if="aclientbm.stu == 'S'">已开始</text>
							<text class="text-red" v-if="aclientbm.stu == 'F'">已结束</text>
							<text class="text-red" v-if="aclientbmm.stu == 'R'">提款中</text>
							<text class="text-green" v-if="aclientbm.stu == 'T'">已提款</text>
							<text class="text-red" v-if="aclientbm.stu == 'C'">已取消</text>
							<text class="text-green" v-if="aclientbm.stu == 'J'">退款中</text>
							<text class="text-red" v-if="aclientbm.stu == 'E'">已退款</text>
						</text>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="aclientbm.fxjlid" class="bg-white margin-top">
			<view class="padding solid-bottom flex justify-start">
				<view class="text-gray title">
					<text>推荐奖励</text>
				</view>
			</view>
			<view class="padding">
				<view class="flex justify-between align-center">
					<text>推荐人：</text>
					<text>{{fromclient.nc}}</text>
				</view>
				<view class="flex justify-between align-center">
					<text>消费者：</text>
					<text>{{client.nc}}</text>
				</view>
				<view class="flex justify-between align-center">
					<text>金额：</text>
					<text>{{afxjl.amount}}</text>
				</view>
				<view class="flex justify-between align-center">
					<text>奖励比例：</text>
					<text>{{afxjl.tqper}}</text>
				</view>
				<view class="flex justify-between align-center">
					<text>奖励金额：</text>
					<text>{{afxjl.fxje}}</text>
				</view>
				<view class="flex justify-end align-center">
					<button @click="rejectFx(aclientbm.fxjlid)" class="bg-red round ">不同意</button>
				</view>
			</view>
		</view>
		
		<view class="bg-white margin-top">
			<view class="padding solid-bottom flex  justify-start align-baseline">
				<view class="text-pink title">
					<text class="text-xxl  ">
						<text class="iconfont icon-kecheng"></text>
					</text>
					<text>课程</text>
				</view>
			</view>
			<view class="bg-white">
				<view class="flex relative">
					<image class="flex-sub" :src="akecheng.cover" mode="aspectFill"></image>
					<view class="bg-red padding-sm absolute left0 bottom0">当前课程{{kczt[akecheng.zt]}}</view>
				</view>
				<view>
					<view class="padding flex justify-between">
						<text>{{akecheng.kcname}}</text>
					</view>
					<view v-if="akecheng.zt != 'C'" class="padding">
						<view class="text-gray text-sm flex justify-between">
							<text>{{akecheng.st}}~{{akecheng.et}}</text>
							<view class="text-gray text-sm">
								<text class="cuIcon-myfill">{{akecheng.ybrs}}</text>
								<text class="cuIcon-my margin-left-sm">{{akecheng.zxrs}}</text>
								<text class="cuIcon-friend margin-left-sm">{{akecheng.zdrs}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="bg-white margin-top">
			<view v-if="akecheng.zt != 'C'" class="bg-white">
				<view class="padding solid-bottom flex  justify-start align-baseline">
					<view class="text-pink title">
						<text class="text-xxl  ">
							<text class="iconfont icon-yishangkekeshishu"></text>
						</text>
						<text>课程章节</text>
					</view>
				</view>
				<view>
					<view class="cu-timeline" v-for="(kechengitem,index) in akechengitems" :key="index">
						<view class="flex justify-start padding-sm">
							<view class="flex justify-start padding-left">
								<text class="margin-right-sm">{{kechengitem.dt}}</text>
								<text>{{kechengitem.st}}</text>~
								<text>{{kechengitem.et}}</text>
							</view>
			
						</view>
						<view class="cu-item">
							<view :style="'background-image:url('+kechengitem.scover+'); background-size: 100% 100%;'">
								<view class="position-relative">
									<view class="kibackground"></view>
									<view class="padding position-relative">
										<view class="cu-capsule radius">
											<view class="cu-tag bg-pink">第{{index+1}}节</view>
											<view class="cu-tag line-pink">{{kechengitem.itemname}}</view>
										</view>
										<view class="margin-top">
											<view class="text-black">{{kechengitem.sname}}</view>
											<view class="margin-top-sm flex">
												<view class="cu-avatar lg"
													:style="'background-image:url('+kechengitem.rcover+');'">
			
												</view>
												<view class="flex-treble flex align-center padding-left-sm text-black">
													{{kechengitem.rname}}
												</view>
											</view>
										</view>
									</view>
								</view>
			
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data: function() {
			return {
				kczt: this.constant.kczt.KCZT,
				aclientbm: {},
				client: {},
				akecheng: {},
				ajiaolian: {},
				akechengitems: [],
				afxjl: {},
				fromclient: {}

			};
		},
		onLoad: function(option) {
			this.aclientbm.bmid = option.bmid;
			this.loadData();
		},
		methods: {
			loadData: function() {
				this.api("/client/bm/info/get").send({
					bmid: this.aclientbm.bmid
				}).then(data => {
					this.aclientbm = data.aclientbm;
					this.akecheng = data.akecheng;
					this.ajiaolian = data.ajiaolian;
					this.client = data.aclient;
					this.akechengitems = data.akechengitems;
					this.afxjl = data.afxjl;
					this.fromclient = data.fromclient;
				})

			},
			rejectFx: function(fxjlid) {
				this.api("/jl/fx/reject").send({
					fxjlid,
				}).then(data => {
					this.afxjl = data.afxjl;
				});
			}

		}
	}
</script>

<style>
	.kibackground {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.8);
	}
</style>